import React, { useState, useEffect, useRef } from 'react'
import List from './component/list';
import Dialog from './component/dialog';
import { Tabs, Button, Form } from 'antd';
import 'antd/dist/antd.css';

const { TabPane } = Tabs;
export default function App() {
    // 地址
    const [addressData, seaddress] = useState([
        {
            name: '1',
            age: 58,
            address: '114',
            id: 1
        },
        {
            name: '2',
            age: 26,
            address: '113',
            id: 2
        },
        {
            name: '3',
            age: 26,
            address: '112',
            id: 2
        },
        {
            name: '4',
            age: 26,
            address: '111',
            id: 2
        },
    ])
    // 邮箱
    const [email, setemail] = useState([
        {
            name: '1',
            age: 23,
            email: '123456@qq.com',
            id: 1
        },
        {
            name: '2',
            age: 56,
            email: '111111@qq.com',
            id: 2
        },
        {
            name: '3',
            age: 34,
            email: '222222222@qq.com',
            id: 2
        },
        {
            name: '4',
            age: 29,
            email: '333333333@qq.com',
            id: 2
        },
    ])
    const [isUpdate, setIsupdate] = useState(0)
    const [visible, setvisible] = useState(false)
    const [tabKey, settabKey] = useState(0)
    const [ModalForm] = Form.useForm()

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },

        {
            title: !Number(tabKey) ? 'Address' : 'email',
            dataIndex: !Number(tabKey) ? 'address' : 'email',
            key: !Number(tabKey) ? 'address' : 'email',
        },
        {
            title: 'Operation',
            dataIndex: 'Operation',
            key: 'Operation',
            render: (text, record, index) => <div>
                <Button type='link' onClick={() => handleDelete(record)}>Delete</Button>
                <Button type='link' onClick={() => handleUpdate(record)}>Update</Button>
            </div>,
        },
    ]
    // 删除
    const handleDelete = (record) => {
        if (!Number(tabKey)) {
            const newArr = addressData.filter(item => item.id !== record.id)
            seaddress(() => newArr)
        } else {
            const newArr1 = email.filter(item => item.id !== record.id)
            setemail(() => newArr1)
        }
    }
    // 修改-打开弹窗
    const handleUpdate = (record) => {
        openModal()
        console.log(record.id)
        ModalForm.setFieldsValue(record)
        setIsupdate(record.id)
    }
    // 打开弹窗
    const openModal = () => {
        setvisible(true)
    }
    // 新增-打开弹窗
    const addModal = () => {
        openModal()
        setIsupdate(0)
    }
    // 关闭弹窗
    const closeModal = () => {
        setvisible(false)
        ModalForm.resetFields()
    }
    // tab切换
    const tabChange = (key) => {
        console.log(key)
        settabKey(key)
    }
    // 新增
    const handleAdd = (value) => {
        if (!Number(tabKey)) {
            const id = addressData.length ? Math.max(...addressData.map(item => item.id)) + 1 : 1
            value.id = id
            seaddress(predata => [...predata, value])
        } else {
            const id = email.length ? Math.max(...email.map(item => item.id)) + 1 : 1
            value.id = id
            setemail(() => [...email, value])
        }

    }
    // 修改
    const updateDate = (value) => {
        console.log(tabKey)
        if (!Number(tabKey)) {
            const obj = { ...value, id: isUpdate }
            const index = addressData.findIndex(item => item.id === isUpdate)
            const newArr = [...addressData]
            newArr[index] = obj
            seaddress(newArr)
        } else {
            const obj = { ...value, id: isUpdate }
            const index1 = email.findIndex(item => item.id === isUpdate)
            const newArr1 = [...email]
            newArr1[index1] = obj
            setemail(newArr1)
        }



    }
    return (
        <div>
            <Tabs defaultActiveKey="0" onChange={tabChange}>
                <TabPane tab="地址" key="0">

                </TabPane>
                <TabPane tab="邮箱" key="1">
                </TabPane>

            </Tabs>
            <List addressData={!Number(tabKey) ? addressData : email} columns={columns} addModal={addModal} />
            <Dialog visible={visible} closeModal={closeModal} tabKey={tabKey} handleAdd={handleAdd} ModalForm={ModalForm} isUpdate={isUpdate} updateDate={updateDate} />
        </div>
    )
}
